{% extends "base.html" %}

{% block title %}TMDB搜索 - SkitPanel 短剧管理面板{% endblock %}

{% block styles %}
    <link rel="stylesheet" href="{{ url_for('static', filename='css/tmdb.css') }}">
{% endblock %}

{% block content %}
<div class="container mx-auto p-4">
    <!-- 媒体详情弹窗 -->
    <div id="media-detail-modal" class="fixed inset-0 bg-black/70 z-50 flex items-center justify-center hidden">
        <div class="bg-white rounded-xl shadow-2xl max-w-4xl w-full max-h-[90vh] overflow-y-auto">
            <!-- 弹窗头部 -->
            <div class="sticky top-0 bg-white p-6 border-b flex justify-between items-center z-10">
                <h2 id="modal-title" class="text-xl font-bold text-dark">媒体详情</h2>
                <button id="close-modal" class="text-gray-500 hover:text-gray-700">
                    <i class="fa fa-times text-xl"></i>
                </button>
            </div>
            
            <!-- 弹窗内容 -->
            <div class="p-6">
                <div id="modal-loading" class="flex items-center justify-center py-10">
                    <div class="loading-spinner"></div>
                </div>
                <div id="modal-content" class="hidden">
                    <!-- 内容将通过JavaScript动态生成 -->
                </div>
            </div>
        </div>
    </div>
    
    <!-- 搜索框区域 -->
    <div class="bg-white rounded-xl shadow-lg p-6 mb-6">
        <h2 class="text-xl font-semibold mb-4 text-dark flex items-center">
            <i class="fa fa-search mr-2 text-primary"></i>
            TMDB 媒体搜索
        </h2>
        <div class="flex flex-col md:flex-row gap-4">
            <div class="flex-1">
                <label for="tmdb-search-input" class="block text-sm font-medium text-gray-700 mb-1">电影 / 电视节目名称</label>
                <input 
                    type="text" 
                    id="tmdb-search-input" 
                    placeholder="搜索电影或电视节目..."
                    class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-all"
                >
            </div>
            <div class="flex gap-3">
                <select id="search-type" class="px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-all">
                    <option value="movie">电影</option>
                    <option value="tv">电视节目</option>
                </select>
                <button id="search-button" class="px-6 py-3 bg-primary hover:bg-primary/90 text-white rounded-lg transition-all flex items-center justify-center">
                    <i class="fa fa-search mr-2"></i> 搜索
                </button>
            </div>
        </div>
    </div>
    
    <!-- 搜索结果区域 -->
    <div id="search-results" class="hidden bg-white rounded-xl shadow-lg p-6 mb-6">
        <h2 class="text-xl font-semibold mb-4 text-dark">搜索结果</h2>
        <div id="results-container" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
            <!-- 搜索结果将通过JavaScript动态添加 -->
        </div>
    </div>
    
    <!-- 24小时内最新电影 -->
    <div class="bg-white rounded-xl shadow-lg p-6 mb-6">
        <div class="flex justify-between items-center mb-4">
            <h2 class="text-xl font-semibold text-dark">最新电影</h2>
            <button id="refresh-movies" class="text-primary hover:text-primary/80 flex items-center transition-colors">
                <i class="fa fa-refresh mr-1"></i> 刷新
            </button>
        </div>
        
        <div id="recent-movies-container" class="relative">
            <!-- 左侧滚动按钮 -->
            <button id="scroll-left-movies" class="absolute left-0 top-1/2 transform -translate-y-1/2 w-10 h-10 bg-white/90 rounded-full shadow-md flex items-center justify-center text-gray-700 hover:bg-white focus:outline-none focus:ring-2 focus:ring-primary/50 z-10">
                <i class="fa fa-chevron-left"></i>
            </button>
            
            <!-- 电影列表 -->
            <div id="movies-scroll-container" class="overflow-x-auto pb-4">
                <div id="movies-list" class="flex space-x-4 min-w-max">
                    <!-- 电影卡片将通过JavaScript动态添加 -->
                    <div class="loading-spinner-container flex items-center justify-center h-64 w-full">
                        <div class="loading-spinner"></div>
                    </div>
                </div>
            </div>
            
            <!-- 右侧滚动按钮 -->
            <button id="scroll-right-movies" class="absolute right-0 top-1/2 transform -translate-y-1/2 w-10 h-10 bg-white/90 rounded-full shadow-md flex items-center justify-center text-gray-700 hover:bg-white focus:outline-none focus:ring-2 focus:ring-primary/50 z-10">
                <i class="fa fa-chevron-right"></i>
            </button>
        </div>
    </div>
    
    <!-- 24小时内最新电视节目 -->
    <div class="bg-white rounded-xl shadow-lg p-6">
        <div class="flex justify-between items-center mb-4">
            <h2 class="text-xl font-semibold text-dark">最新电视节目</h2>
            <button id="refresh-tv" class="text-primary hover:text-primary/80 flex items-center transition-colors">
                <i class="fa fa-refresh mr-1"></i> 刷新
            </button>
        </div>
        
        <div id="recent-tv-container" class="relative">
            <!-- 左侧滚动按钮 -->
            <button id="scroll-left-tv" class="absolute left-0 top-1/2 transform -translate-y-1/2 w-10 h-10 bg-white/90 rounded-full shadow-md flex items-center justify-center text-gray-700 hover:bg-white focus:outline-none focus:ring-2 focus:ring-primary/50 z-10">
                <i class="fa fa-chevron-left"></i>
            </button>
            
            <!-- 电视节目列表 -->
            <div id="tv-scroll-container" class="overflow-x-auto pb-4">
                <div id="tv-list" class="flex space-x-4 min-w-max">
                    <!-- 电视节目卡片将通过JavaScript动态添加 -->
                    <div class="loading-spinner-container flex items-center justify-center h-64 w-full">
                        <div class="loading-spinner"></div>
                    </div>
                </div>
            </div>
            
            <!-- 右侧滚动按钮 -->
            <button id="scroll-right-tv" class="absolute right-0 top-1/2 transform -translate-y-1/2 w-10 h-10 bg-white/90 rounded-full shadow-md flex items-center justify-center text-gray-700 hover:bg-white focus:outline-none focus:ring-2 focus:ring-primary/50 z-10">
                <i class="fa fa-chevron-right"></i>
            </button>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
    <script src="{{ url_for('static', filename='js/tmdb.js') }}"></script>
{% endblock %}